import { Layout, Col, Row } from 'antd';
import ReactECharts from 'echarts-for-react';
import Icon from 'components/Icon';
import Panel from 'components/Panel';
import './index.less';
const { Content } = Layout;


export default function Dashboard() {
  const rankingListData = Array.from({length: 7}, (_, i) => ({
    title: `工专路 ${i} 号店`,
    total: 323234
  }));

  return (
    <Layout className="full-layout page dashboard-page">
      <Content>
        <Row gutter={20}>
          <Col md={6}>
            <Panel className="qq" header={false} cover>
              <Icon type="QqOutlined" antd />
              <h2>
                <b>523</b>
              </h2>
              <h5 className="text-muted">QQ</h5>
            </Panel>
          </Col>
          <Col md={6}>
            <Panel className="wechat" header={false} cover>
              <Icon type="WechatOutlined" antd />
              <h2>
                <b>99+</b>
              </h2>
              <h5 className="text-muted">微信</h5>
            </Panel>
          </Col>
          <Col md={6}>
            <Panel className="skype" header={false} cover>
              <Icon type="SkypeOutlined" antd />
              <h2>
                <b>2</b>
              </h2>
              <h5 className="text-muted">skype</h5>
            </Panel>
          </Col>
          <Col md={6}>
            <Panel className="github" header={false} cover>
              <Icon type="GithubOutlined" antd />
              <h2>
                <b>1k+</b>
              </h2>
              <h5 className="text-muted">github</h5>
            </Panel>
          </Col>
        </Row>
        <Row>
          <Col>
            <Panel title="数据面板组件" height={300}>
              <div className="flex">
                <div className="flex-auto-hidden flex flex-column">
                  <h4 className="flex-none">销售额分布</h4>
                  <div className="flex-auto-hidden">
                    none
                  </div>
                </div>
                <div className="flex-none sales-order">
                  <h4>门店销售额排名</h4>
                  <ul>
                    {rankingListData.map((item, i) => (
                      <li key={item.title}>
                        <span>{i + 1}</span>
                        <span>{item.title}</span>
                        <span>{item.total}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </Panel>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col md={8}>
            <Panel title="折线图" height={260}>
              <Line1 />
            </Panel>
          </Col>
        </Row>
      </Content>
    </Layout>
  );
}


// https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/line/series
const Line1 = () => {
  const options = {
    grid: { top: 8, right: 8, bottom: 24, left: 36 },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
  }; 
  return (
    <ReactECharts option={options} />
  );
};
